@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    .song {
        width: 100%;
        height: r(700);
        position: absolute;
        top: 0;
        .song1 {
            position: relative;
            img {
                width: 100%;
                height: r(700);
            }
        }
        .top {
            position: absolute;
            top: r(30);
            left: r(30);
            a {
                img {
                    width: r(22);
                    height: r(34);
                }
            }
        }
    }
    .background {
        width: 100%;
        height: r(640);
        position: absolute;
        top: r(700);
        background: skyblue;
        animation: bgc 10s linear infinite;
        transition: all .3s ease;
        .background1 {
            a img{
                width: r(200);
                float: left;
            }
            #back{
                width: r(500);
                height: r(630);
                float: right;
            }
        }
    }
}

@keyframes bgc {
    0% {
        filter: hue-rotate(0deg);
        opacity: .7;
    }
    50% {
        filter: hue-rotate(180deg);
        opacity: .8;
    }
    100% {
        filter: hue-rotate(360deg);
        opacity: 1;
    }
}